<template>
	<view class="proNumBox">
		<u-number-box
			v-model="item.numvalue"
			:min="0"
			@change="numChange"
		>
			<view
				slot="minus"
				class="minus numbtn"
				:class="item.numvalue <= 0 ? 'none' : ''"
			>
				<u-icon
					name="minus"
					color="#ccc"
					size="12"
				></u-icon>
			</view>
			<text
				slot="input"
				class="input"
				:class="item.numvalue <= 0 ? 'none' : ''"
			>
				{{ item.numvalue }}
			</text>
			<view
				slot="plus"
				class="plus numbtn"
			>
				<u-icon
					name="plus"
					color="#FFFFFF"
					size="12"
				></u-icon>
			</view>
		</u-number-box>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
	name: 'pro-num-box',
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		...mapMutations(['setCarList']),
		numChange(e) {
			this.item.add = false;
			this.setCarList({ item: this.item, num: e.value });
		}
	}
};
</script>

<style lang="scss">
.numbtn {
	width: 40rpx;
	height: 40rpx;
	@include flex-box-set();
}

.minus {
	border: 1px solid #ccc;
}

.plus {
	background-color: $brand-theme-color;
}

.input {
	width: 60rpx;
	height: 40rpx;
	font-size: 26rpx;
	color: #888;
	@include flex-box-set();
}

.none {
	display: none;
}
</style>
